/*普通注释 => 会保留到编译后的css文件*/
// 静默注释 => 只保留在SASS源文件中，编译后被省略。   

@use "sass:math"; //使用数学模块

// sass变量 => 存储数据的容器
$hot: #CC0033;
$cool: #CCFFFF;
$grey: #CCCCCC;
$warm: #FFCCCC;
$success: #CCFF99;
$cold: #99CCFF;

$typeArea: 1226px;

$side: left;

// scss函数
@function pxToRem($val) {
    // 720px / 100px => 7.2
    // @return #{calc($val/100px)}rem;
    @return calc($val/100px)*1rem;
}

// @mixin (混合)   => @mixin命令，定义一个代码块(重复使用)
// 使用步骤
// 1. 定义代码段  @mixin 代码名称{ 复用的代码段 }
// 2. 使用   @include 代码段名称(); 

@mixin typeAreaCenter {
    width: $typeArea;
    margin: 0 auto;
}

//  @include  也可以设置参数和默认值
@mixin textCenter($height: 16px) {
    text-align: center;
    line-height: $height;
}





html {
    font: 14px/16px "微软雅黑";
}

// scss嵌套:
// 一般情况下，sass在解开一个嵌套规则时就会把父选择器 通过一个空格连接到子选择器的前边 => 包含选择器
.header {
    @include typeAreaCenter();
    // height: 40px;
    @include textCenter(40px);
    background-color: $grey;

    // scss插值语句: #{}   => 可以在选择器 css属性名 css属性值中拼接变量
    border-#{$side}: 1px solid #333;

    // & 被替换为父选择器 => .header-nav
    &-nav {
        float: left;
        line-height: 40px;

        .nav {
            // display: flex;

            // 父选择器修饰符: 当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是&被父选择器直接替换：
            // .header .header-nav .nav 替换 &    > li 
            &>li {
                float: left;
                padding: 0 20px;
                position: relative;

                // & => .header .header-nav .nav > li
                &:hover {
                    background-color: $hot;

                    .subNav {
                        display: block;
                    }
                }

                .subNav {
                    width: 100%;
                    position: absolute;
                    left: 0;
                    top: 40px;
                    background-color: #99CCFF;
                    display: none;
                }
            }

        }
    }

    &-search {
        float: right;
        display: flex;
        margin-top: 2px;
        border: 1px solid #666;
        border-radius: 4px;
        overflow: hidden;
        margin-right: 10px;

        .searchCon {
            width: 250px;
            height: 32px;
            padding: 0;
            border: 0;
            outline: none;
        }

        .searchBtn {
            display: block;
            width: 32px;
            height: 32px;
            background-color: $warm;
        }
    }
}




// 计算属性: sass语法中可以使用算术运算符
// 加法: 可以一个有单位 一个没有单位, 或者两个都有单位
// 减法: 可以一个有单位 一个没有单位, 或者两个都有单位
// 乘法: 一个有单位,一个没有单位(几倍)    两个都有单位报错200px*2px => 400px*px
// 除法: 一个有单位,一个没有单位 ,  两个都有单位(倍数处理 => 单位舍去  200px/2px = 100)


.swiper {
    @include typeAreaCenter();
}

.section {
    width: 5*$typeArea;
}

.section .part {
    width: $typeArea;
}

.box {
    width: 200px + 20px;
    width: 200px - 20px;
    width: 200px * 2;
    // width: math.div(200px, 2);
    width: calc(200px / 2);
    // width: calc(200px / 2px);

    width: pxToRem(720px);

    border: 1px solid #333;
}


.container {
    @include typeAreaCenter();
}